<template>
  <PageWrapper>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="font-size: 16px"
    >
      <el-breadcrumb-item :to="{ path: '/console' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br /><br />
    <PageContentWrapper>
      <el-form
        :inline="true"
        ref="form"
        :model="filterParams"
        class="demo-form-inline"
      >
        <el-form-item label="时间">
          <el-date-picker
            v-model="timeInterVal"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model.trim="filterParams.keyWord"
            clearable
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="handleQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" round @click="addDialog = true"
            >发起公告</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="success" round 
            >站内消息</el-button
          >
        </el-form-item>
      </el-form>
      <!-- table -->
      <el-card shadow="nerver" class="base-table">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          stripe
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="context"
            label="标题"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="操作人"
            width="180"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createAt"
            label="操作时间"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                icon="el-icon-edit"
                circle
                plain
              ></el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                @click.native.prevent="deleteRow(scope.$index)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑 -->
        <el-dialog
          title="公告修改"
          :visible.sync="editFormVisible"
          :close-on-click-modal="false"
          class="edit-form"
          center
        >
          <el-form :model="editForm" label-width="80px" ref="editForm">
            <el-form-item label="公告内容" prop="context">
              <el-input v-model="editForm.context" auto-complete="off" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false"
              >取 消
            </el-button>
            <el-button type="primary" @click.native="handleUpdate('editForm')"
              >确 定
            </el-button>
          </div>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.current"
          :page-size="pagination.size"
          layout="total, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
        <!-- 添加 -->
        <el-dialog
          title="发起公告"
          :visible.sync="addDialog"
          :close-on-click-modal="false"
          class="edit-form"
          center
        >
          <el-form :model="editForm" label-width="80px" ref="editForm">
            <el-form-item label="公告内容" prop="context">
              <el-input v-model="editForm.context" auto-complete="off" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false"
              >取 消
            </el-button>
            <el-button type="primary" @click.native="handleUpdate('editForm')"
              >确 定
            </el-button>
          </div>
        </el-dialog>
      </el-card>
    </PageContentWrapper>
  </PageWrapper>
</template>
<script>
export default {
  data() {
    return {
      editFormVisible: false,
      editForm:{
          context:'',
          id: "",
          userName: "",
          createAt: "",
      },
      filterParams: {
        moduleType: "",
        startTime: "",
        endTime: "",
        keyWord: "",
      },
      timeInterVal: "",
      moduleOptions: [],
      pagination: {
        // 分页器信息
        total: 5,
        current: 1,
        size: this.$store.state.defaultPageSize,
      },
      tableData: [
        {
          id: "9743",
          context: "系统文件管理功能已更新",
          userName: "admin",
          createAt: "2022-04-01 10:00:15",
        },
        {
          id: "9353",
          context: "系统最新版本已开放",
          userName: "admin",
          createAt: "2022-04-02 16:00:15",
        },
        {
          id: "9794",
          context: "系统开发中",
          userName: "admin",
          createAt: "2022-03-21 10:00:15",
        },
        {
          id: "9189",
          context: "视频学习模块正在维护",
          userName: "admin",
          createAt: "2022-04-01 10:00:15",
        },
        {
          id: "9493",
          context: "系统维护中",
          userName: "admin",
          createAt: "2022-03-31 13:10:15",
        },
      ],
      tableLoading: false,
      addDialog:false
    };
  },
  mounted() {
    this.queryTable();
    this.getOptions();
  },
  methods: {
    // 添加公告
    addNotice(){
      this.addDialog = true

    },
    // 设置时间
    setTime(timeArr) {
      if (timeArr) {
        this.filterParams.startTime = timeArr[0];
        this.filterParams.endTime = timeArr[1];
      } else {
        this.filterParams.startTime = "";
        this.filterParams.endTime = "";
      }
    },
    handleEdit: function(index, row) {
      console.log(row);
      this.editFormVisible = true; //dialog对话窗口打开
      this.editForm = row; //将数据传入dialog页面
      this.editForm.index = index; //传递当前index
    },
    // 删除公告
    deleteRow(index) {
      this.total--;
      this.tableData.splice(index, 1);
      this.$message({
        type: "success",
        message: "公告删除成功!",
      });
    },
    // 公告更新
    handleUpdate(formName) {
      //dialog页面数据写入到tableData页面上
      //this.$set(tableName,talbeIndex,data)
      this.$set(this.tableData, this.editForm.index, {
        id: this.editForm.id,
        userName: this.editForm.userName,
        createAt: this.editForm.createAt,
        context: this.editForm.context
      });
      this.editFormVisible = false;
      this.$message({
        type: "success",
        message: "编辑成功",
      });
    },
    handleQuery() {
      this.pagination.current = 1;
      this.queryTable();
    },
    // 页码改变触发
    handleCurrentChange() {
      this.queryTable();
    },
    async queryTable() {
      const param = Object.assign(
        {},
        { projectId: this.projectId },
        this.pagination,
        this.filterParams
      );
      delete param.total;
      this.tableLoading = true;
      //TODO
      const { data: res } = await this.$http.get(
        "noticeList" + this.filterParams.keyWord
      );
      this.$minLoadingTime(getDataFn)
        .then((res) => {
          const resData = res[0];
          this.tableData = resData.item;
          this.pagination.total = resData.total;
          this.pagination.current = resData.current;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.record-text {
  width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.handleLog-pre {
  padding: 5px 10px;
  margin: 5px;
  word-break: break-all;
  max-height: 500px;
  overflow: auto;
  max-width: 800px;
}
</style>
